<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Zepto FX unit tests</title>
  <script src="../src/zepto.js"></script>
  <script src="../src/event.js"></script>
  <script src="../src/fx.js"></script>
  <script src="../vendor/evidence.js"></script>
</head>
<body>
  <h1>Zepto FX unit tests</h1>
  <p>
    See the browser console for results.
  </p>

  <div id="animtest" style="width:40px;height:40px;background:red"></div>
  <div id="durationtest_1" style="width:40px;height:40px;background:red"></div>
  <div id="durationtest_2" style="width:40px;height:40px;background:red"></div>
  <div id="callbacktest" style="width:40px;height:40px;background:red"></div>

  <script>
    Evidence.TestCase.extend('ZeptoFXTest', {

      testAnim: function(t){
        var el = $('#animtest').get(0);
        $('#animtest').anim({
          translate3d: '100px, 100px, 100px',
          rotateZ: '90deg',
          opacity: 0.5
        }, 2, 'ease-out');
        t.assertEqual('translate3d(100px, 100px, 100px) rotateZ(90deg)', el.style.webkitTransform);
        t.assertEqual('ease-out', el.style.webkitTransitionTimingFunction);
        t.assertEqual('0.5', el.style.opacity);
      },

      testDuration: function(t){
        $('#durationtest_1').anim({
          translate3d: '100px, 100px, 100px',
          rotateZ: '90deg',
          opacity: 0.5
        });
        t.assertEqual('0.5s', $('#durationtest_1').get(0).style.webkitTransitionDuration);

        $('#durationtest_2').anim({
          translate3d: '100px, 100px, 100px',
          rotateZ: '90deg',
          opacity: 0.5
        }, 0);
        t.assertEqual('0s', $('#durationtest_2').get(0).style.webkitTransitionDuration);
      },

      testCallback: function(t){
        t.pause();
        var duration = 250; //Milliseconds
        var start = new Date().getTime();
        $('#callbacktest').anim({
          translate3d: '100px, 100px, 100px',
          rotateZ: '90deg',
          opacity: 0.5
        }, duration / 1000, 'linear',
        function(){
          t.resume(
          function(){
            this.assert((new Date().getTime() - start) >= duration);
          });
        });
      }
    });
  </script>
</body>
</html>
